<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Demo</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: Helvetica;
        background-color: #fff;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }
      #root {
        position: relative;
      }
      .demo {
        width: 800px;
        margin: 20px auto 0 auto;
        border: 1px solid #ccc;
        border-radius: 2px;
      }
      .preview-button,
      .modal-button {
        width: auto;
        padding: 0 10px !important;
        font-size: 14px !important;
      }
      .keyboard-item {
        box-sizing: border-box;
        position: relative;
        top: -2px;
        padding: 2px 6px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 2px;
        background-image: linear-gradient(#fff, #f8f8f8);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
        color: #666;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
